baubs git
docs/TYPOGRAPHY_SYSTEM.md eb774dcb30aab508debcb5bdb76076bd486ce292 (eb774dcb) Text, 6.98 KB
Respira Typography System
Current Problems
❌ 12 different font sizes including arbitrary values (7px, 9px, 10px, 11px, 13px)
❌ Inconsistent hierarchy - unclear when to use which size
❌ Poor accessibility - text as small as 7px
❌ Responsive scaling is inconsistent
New Typography System (Tailwind Classes Only)
5-Level Hierarchy
T282828
Level Desktop (lg:) Mobile/Tablet Weight Usage
─────────────────────────────────────────────────────────────────────────────────
Display text-xl (20px) text-lg (18px) font-bold App title, page headers
Heading text-lg (18px) text-base (16px) font-semibold Section titles, dialogs
Subheading text-sm (14px) text-sm (14px) font-semibold Card titles
Body text-sm (14px) text-sm (14px) font-medium Content, buttons
Label text-xs (12px) text-xs (12px) font-medium Metadata, helpers, tags
Key Decisions:
• ✅ No custom pixel sizes - only Tailwind standards
• ✅ Minimum 12px - text-xs (12px) is the smallest size (accessible)
• ✅ Body = text-sm - 14px is optimal for reading and touch targets
• ✅ Consistent responsive - most don't need breakpoints except Display/Heading
Font Weight System
T282828
Display: font-bold (700) - Maximum emphasis
Heading: font-semibold (600) - Section headers
Subheading: font-semibold (600) - Card/component titles
Body: font-medium (500) - Interactive elements (buttons)
Body: font-normal (400) - Static text
Label: font-medium (500) - Small but important
Label: font-normal (400) - Decorative/secondary
Component Mapping
App.tsx
┌──────────────────────┬─────────┬──────────────────────────────┐
│ Element │ Old │ New │
├──────────────────────┼─────────┼──────────────────────────────┤
│ "Respira" title │ text-lg │ text-xl lg:text-xl (Display) │
│ Serial number │ text-sm │ text-xs (Label) │
│ "Not Connected" │ text-sm │ text-xs (Label) │
│ Disconnect button │ text-xs │ text-sm (Body) │
│ Status badge │ text-xs │ text-xs (Label) │
│ Error message │ text-sm │ text-sm (Body) │
│ "Pattern Preview" h2 │ text-xl │ text-lg lg:text-lg (Heading) │
│ Empty state title │ text-xl │ text-lg (Heading) │
│ Empty state body │ text-sm │ text-sm (Body) │
│ Feature indicators │ text-xs │ text-xs (Label) │
└──────────────────────┴─────────┴──────────────────────────────┘
FileUpload.tsx
┌────────────────────────────────────┬─────────┬────────────────────────────────────┐
│ Element │ Old │ New │
├────────────────────────────────────┼─────────┼────────────────────────────────────┤
│ "Pattern File" title │ text-sm │ text-sm font-semibold (Subheading) │
│ Filename │ text-xs │ text-xs (Label) │
│ Stats labels │ text-xs │ text-xs (Label) │
│ Button text │ text-xs │ text-sm (Body) │
│ "Colors:" label │ text-xs │ text-xs (Label) │
│ Error messages │ text-xs │ text-sm (Body) │
│ Upload progress │ text-xs │ text-xs (Label) │
│ Remove: text-[7px] badge → text-xs │ │ │
└────────────────────────────────────┴─────────┴────────────────────────────────────┘
PatternCanvas.tsx
┌────────────────────┬────────────────────────────┬────────────────────────────────────┐
│ Element │ Old │ New │
├────────────────────┼────────────────────────────┼────────────────────────────────────┤
│ "Pattern Preview" │ text-sm │ text-sm font-semibold (Subheading) │
│ Dimensions │ text-xs │ text-xs (Label) │
│ "Colors" header │ text-[10px] sm:text-xs │ text-xs (Label) │
│ Color labels │ text-[10px] sm:text-[11px] │ text-xs (Label) │
│ Thread metadata │ text-[9px] │ text-xs (Label) │
│ "Pattern Position" │ text-[10px] sm:text-[11px] │ text-xs (Label) │
│ "LOCKED" badge │ text-[9px] sm:text-[10px] │ text-xs (Label) │
│ Coordinates (X/Y) │ text-[11px] sm:text-[13px] │ text-sm (Body) │
│ Help text │ text-[9px] sm:text-[10px] │ text-xs (Label) │
│ Zoom % │ text-[11px] sm:text-[13px] │ text-sm (Body) │
└────────────────────┴────────────────────────────┴────────────────────────────────────┘
ProgressMonitor.tsx
┌──────────────────┬─────────┬────────────────────────────────────┐
│ Element │ Old │ New │
├──────────────────┼─────────┼────────────────────────────────────┤
│ "Progress" title │ text-sm │ text-sm font-semibold (Subheading) │
│ Block labels │ text-xs │ text-xs (Label) │
│ Stitch counts │ text-xs │ text-xs (Label) │
│ Button text │ text-xs │ text-sm (Body) │
└──────────────────┴─────────┴────────────────────────────────────┘
WorkflowStepper.tsx
┌──────────────┬────────────────────────┬─────────────────┐
│ Element │ Old │ New │
├──────────────┼────────────────────────┼─────────────────┤
│ Step numbers │ text-[10px] lg:text-xs │ text-xs (Label) │
│ Step labels │ text-[10px] lg:text-xs │ text-xs (Label) │
└──────────────┴────────────────────────┴─────────────────┘
NextStepGuide.tsx
┌──────────────┬─────────┬────────────────────────────────┐
│ Element │ Old │ New │
├──────────────┼─────────┼────────────────────────────────┤
│ Step titles │ text-lg │ text-lg sm:text-base (Heading) │
│ Instructions │ text-sm │ text-sm (Body) │
│ Error codes │ text-xs │ text-xs font-mono (Label) │
└──────────────┴─────────┴────────────────────────────────┘
PatternSummaryCard.tsx
┌────────────────────────────────────┬─────────┬────────────────────────────────────┐
│ Element │ Old │ New │
├────────────────────────────────────┼─────────┼────────────────────────────────────┤
│ "Active Pattern" │ text-sm │ text-sm font-semibold (Subheading) │
│ Filename │ text-xs │ text-xs (Label) │
│ Stats │ text-xs │ text-xs (Label) │
│ Button text │ text-xs │ text-sm (Body) │
│ Remove: text-[7px] badge → text-xs │ │ │
└────────────────────────────────────┴─────────┴────────────────────────────────────┘
MachineConnection.tsx
┌───────────────┬─────────────┬────────────────────────────────────┐
│ Element │ Old │ New │
├───────────────┼─────────────┼────────────────────────────────────┤
│ Card titles │ text-sm │ text-sm font-semibold (Subheading) │
│ Helper text │ text-xs │ text-xs (Label) │
│ Button text │ text-xs │ text-sm (Body) │
│ Error details │ text-[10px] │ text-xs (Label) │
└───────────────┴─────────────┴────────────────────────────────────┘
ConfirmDialog.tsx
┌──────────────┬─────────┬───────────────────┐
│ Element │ Old │ New │
├──────────────┼─────────┼───────────────────┤
│ Dialog title │ text-xl │ text-lg (Heading) │
│ Button text │ text-sm │ text-sm (Body) │
└──────────────┴─────────┴───────────────────┘
BluetoothDevicePicker.tsx
┌──────────────┬─────────┬───────────────────┐
│ Element │ Old │ New │
├──────────────┼─────────┼───────────────────┤
│ Dialog title │ text-xl │ text-lg (Heading) │
│ Device names │ text-sm │ text-sm (Body) │
│ Device IDs │ text-xs │ text-xs (Label) │
│ Button text │ text-sm │ text-sm (Body) │
└──────────────┴─────────┴───────────────────┘
Benefits
✅ 5 sizes only - Down from 12 (much cleaner)
✅ Standard Tailwind - No custom pixel values
✅ Accessible - Minimum 12px (text-xs)
✅ Touch-friendly - Buttons use text-sm (14px)
✅ Clear hierarchy - Semantic naming (Display → Heading → Subheading → Body → Label)
✅ Easy to maintain - Standard classes everyone knows
✅ Consistent responsive - Only Display and Heading scale down
Implementation Rules
When to use each level:
Display (text-xl/text-lg) - Only for:
• Main app title ("Respira")
• Top-level page headers
Heading (text-lg/text-base) - For:
• Section headers ("Pattern Preview", "Step 1: Connect")
• Dialog titles
• Empty state titles
• Major workflow steps
Subheading (text-sm semibold) - For:
• Card component titles ("Pattern File", "Active Pattern", "Progress")
• Sub-section headers within cards
Body (text-sm) - For:
• Primary readable content
• Button labels (interactive!)
• Error messages
• Instructions and descriptions
• Input fields
Label (text-xs) - For:
• Metadata (filenames, dimensions, stitch counts)
• Field labels ("Size:", "Stitches:", "Colors:")
• Status badges
• Helper text
• Timestamps
• Tags and small indicators
Responsive Strategy
Most text doesn't need responsive variants:
• Body (text-sm) stays the same
• Label (text-xs) stays the same
• Subheading (text-sm) stays the same
Only top-level headers scale:
• Display: T383838text-lg lg:text-xl (18px → 20px)
• Heading: T383838text-base lg:text-lg (16px → 18px)
This creates a subtle hierarchy shift on desktop without fragmenting the system.
Served by rngit 1.4.2 - Generated in 0.04s